<template>
  <div class="container">
    <nav-bar title="积分记录" />
    <div class="main">
      <div class="amount">
        <h3>{{userInfoDetail.Integral}}</h3>
        <router-link to="/scoreSend" class="send">积分转赠</router-link>
      </div>
      <div class="dis">
        您可以使用积分抵扣商品以及课程报名，100积分抵1元
      </div>
    </div>
    <div class="history">
      <div class="item" v-for="(item, index) in userScoreList" :key="index">
        <div class="title">
          <h4>{{item.ShowType}}</h4>
          <p>{{item.RecordDate}}</p>
        </div>
        <div class="amount">{{item.Integral}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserDetail, getUserScore } from '../../network/user'
import { format } from 'date-fns'

export default {
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      userInfoDetail: {},
      userScoreList: '',
    }
  },
  components: {
    NavBar
  },
  mounted() {
    this.getUserDetail()
    this.getUserScore()
  },
  methods: {
    // 获取积分总额
    getUserDetail(){
      let requestData = {
        userkey: this.userKey
      }
      getUserDetail(requestData, info => {
        this.userInfoDetail = info
      })
    },
    // 获取积分记录
    getUserScore(){
      let requestData = {
        userkey: this.userKey,
        page: 1,
        pagesize: 1000,
      }
      getUserScore(requestData, info => {
        info
        this.userScoreList = info.data.map(item => {
          item.RecordDate = format(new Date(item.RecordDate), 'yyyy-MM-dd HH:mm:ss')
          item.Integral = item.Integral > 0 ? '+'+item.Integral : item.Integral
          return item
        })
      })
    },
  },
}
</script>

<style scoped>
.container{
  background-color: #ffffff;
}
.main{
  height: 110px;
  color: #ffffff;
  background-color: #000000;
}
.main .amount{
  color: #ffffff;
  padding: 20px 25px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main .amount h3{
  font-size: 18px;
}
.main .amount .send{
  color: #ffffff;
  width: 100px;
  line-height: 30px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
  background-color: #646161;
}
.main .dis{
  padding: 10px 25px 30px 25px;
  font-size: 12px;
}
.history .item{
  height: 60px;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f6f6f6;
  box-sizing: border-box;
}
.history .item .title p{
  color: #ababab;
  font-size: 12px;
}
.history .item .amount{
  padding-top: 5px;
}
</style>